<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据展示</title>

		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<%--		引入Echartsjs文件--%>
		<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
			<script src="${pageContext.request.contextPath}/js/china.js"></script>
		</head>
	
	<body class="layui-layout-login">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>

	<body class="layui-layout-login">
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main1" style="width: 600px;height:400px;"></div>
	<div id="main2" style="width: 600px;height:400px;"></div>
	</body>
	<script>
	</script>
	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myChart1 = echarts.init(document.getElementById('main1'));
		var myChart2 = echarts.init(document.getElementById('main2'));
		$(function(){
			$.ajax({
				url:"${pageContext.request.contextPath}/user/regionCount",
				success:function (data) {
					console.log(data)
					var option3 = {
						title : {
							text: '用户地区分布',
							left: 'center'
						},
						tooltip : {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data:['用户人数']
						},
						visualMap: {
							min: 0,
							max: 25000,
							left: 'left',
							top: 'bottom',
							text:['高','低'],           // 文本，默认为数值文本
							calculable : true
						},
						toolbox: {
							show: true,
							orient : 'vertical',
							left: 'right',
							top: 'center',
							feature : {
								mark : {show: true},
								dataView : {show: true, readOnly: false},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						series : [
							{
								name: '用户人数',
								type: 'map',
								mapType: 'china',
								roam: false,
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: true
									}
								},
								data:data
							}
						]
					};
					// 使用刚指定的配置项和数据显示图
					// 表。
					myChart2.setOption(option3);
				}
			})
			$.ajax({
				url:'${pageContext.request.contextPath}/user/RegisterIncrease',
				success:function (data) {
					console.log(data)
					// 指定图表的配置项和数据
					var option1 = {
						//图表的标题
						title: {
							text: '三周内用户注册量的变化'
						},
						// 工具栏
						tooltip: {},
						// legend 传奇 在数学中指的是 系列
						// 在代码中 代表数据的类型
						legend: {
							data:['人数']
						},
						// xAxis x轴坐标
						xAxis: {
							data: ["5.1-5.4","5.4-5.11","5.11-5-18"]
						},
						// y 轴坐标 自动生成
						yAxis: {},
						// 给x轴赋值
						series: [{
							// name 必须和 legend 中的配置一样
							name: '人数',
							// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
							type: 'line',
							// x轴坐标对应的坐标值
							data: [data[0],data[1],data[2]]
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option1);
				}
			})
			$.ajax({
				url:'${pageContext.request.contextPath}/user/selectByUserCount',
				success:function (data) {
					console.log(data)
					// 指定图表的配置项和数据
					var option = {
						//图表的标题
						title: {
							text: '持明法洲男女人数对比'
						},
						// 工具栏
						tooltip: {},
						// legend 传奇 在数学中指的是 系列
						// 在代码中 代表数据的类型
						legend: {
							data:['人数']
						},
						// xAxis x轴坐标
						xAxis: {
							data: ["男","女"]
						},
						// y 轴坐标 自动生成
						yAxis: {},
						// 给x轴赋值
						series: [{
							// name 必须和 legend 中的配置一样
							name: '人数',
							// 定义是展示类型 bar柱状图 line折线图 pie 饼状图
							type: 'bar',
							// x轴坐标对应的坐标值
							data: [data[1].value,data[0].value]
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			})


		})




	</script>


</html>
